<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>会员服务</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <link rel="stylesheet" href="../css/swiper.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/swiper.jquery.min.js"></script>
    <style>
        .swiper-slide{width: 100%;height: 200px;background-size: contain;background-position: center;background-repeat: no-repeat;}
        .swiper-pagination-bullet{background-color: #aeaeae;opacity: .4;}
        .swiper-pagination-bullet-active{background-color: #ffc10c;opacity: 1;}
        .vip-name{color: #e60014;}
        .sex{color: #049cce;}
        .star{color: #fec015;}

        .f-head{padding: 12px;}
        .f-head p{color: #333;font-size: 14px;}
        .f-head div{color: #ffc10c;font-size: 13px;margin-top: 10px;}
        .f-head em{color: #666;font-size: 12px;margin-top: 5px;}

        .s-head{border-top: 4px solid #eeedf3;border-bottom: 4px solid #eeedf3;}
        .s-head .top{overflow: hidden;padding: 10px;position: relative;}
        .s-head .top .left{float: left;width: 50px;height: 50px;border-radius: 50px;background-size: cover;background-position: center;background-repeat: no-repeat;}
        .s-head .top .right{float: left;line-height: 50px;margin-left: 10px;}

        .s-head .bottom{overflow: hidden;line-height: 50px;}
        .s-head .bottom .item{float: left;width: 33.3333%;text-align: center;font-size: 14px;}
        .s-head .bottom .item span{color: #ffc10c;margin-right: 4px;}
        .s-head .bottom .item em{font-size: 12px;background-color: #ffc10c;color: #fff;padding: 4px;border-radius: 3px;}

        .t-con{padding-bottom: 30px;}
        .t-con .t-title{overflow: hidden;position: relative;}
        .t-con .t-title div{float: left;width: 50%;line-height: 50px;text-align: center;color: #333;font-size: 14px;}
        .t-con .t-title span{clear: both;display: block;width: 50%;height: 3px;background-color: #ffc10c;}

        .footer{height: 50px;}
        .footer-fixed{position: fixed;z-index: 999;left: 0;bottom: 0;width: 100%;height: 50px;
            display: -webkit-box;display: box;background-color: #fff;}
        .footer-fixed div i{font-size: 20px;}
        .footer-fixed div p{font-size: 12px;}
        .footer-fixed div span{font-size: 18px;}
        .footer-fixed .collect{width: 50px;text-align: center;line-height: 20px;padding-top: 5px;color: #888;position: relative;}
        .footer-fixed .collect:after{content: '';position: absolute;left: auto;bottom: auto;right: 0;top: 0;height: 100%;width: 1px;background-color: #dcdcdc;
            display: block;z-index: 15;-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;transform: scale(.5,1);-webkit-transform: scale(.5,1);}
        .footer-fixed .contact{width: 50px;text-align: center;line-height: 20px;padding-top: 5px;}
        .footer-fixed .contact a{display: block;color: #888;}
        .footer-fixed .talk{background-color: #ffc10c;text-align: center;color: #fff;line-height: 50px;box-flex: 1;-webkit-box-flex: 1;}
        .footer-fixed .reserve{background-color: #e70014;text-align: center;color: #fff;line-height: 50px;box-flex: 1;-webkit-box-flex: 1;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<header class="header header2">
    <div class="header-fixed">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
        </div>
        <div class="center">会员服务</div>
    </div>
</header>
<div class="content">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image: url('../img/QQ截图20160617135527.png')"></div>
            <div class="swiper-slide" style="background-image: url('../img/TB173fQKpXXXXcoaXXXSutbFXXX.jpg')"></div>
            <div class="swiper-slide" style="background-image: url('../img/QQ截图20160617135527.png')"></div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="f-head">
        <p>代驾</p>
        <div>￥228元/小时</div>
        <em>已成交:5笔</em>
    </div>
    <div class="s-head">
        <div class="top bottom-line">
            <div class="left" style="background-image: url('../img/pic_renter.png')"></div>
            <div class="right">
                <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                <span class="sex"><i class="iconfont icon-women"></i></span>
                <span class="star"><i class="iconfont icon-star2"></i></span>
            </div>
        </div>
        <div class="bottom">
            <div class="item">完成质量<span>5</span><em>高</em></div>
            <div class="item">工作速度<span>5</span><em>高</em></div>
            <div class="item">服务态度<span>5</span><em>高</em></div>
        </div>
    </div>
    <div class="t-con">
        <div class="t-title bottom-line">
            <div class="s-detail">服务详情</div>
            <div class="talk">评价</div>
            <span class="b-border"></span>
        </div>
        <div>
            <div class="t-con-de con-de1"></div>
            <div class="t-con-de con-de2"></div>
        </div>
    </div>
</div>
<footer class="footer">
    <div class="footer-fixed top-line">
        <div class="collect">
            <i class="iconfont icon-star4"></i>
            <p>收藏</p>
        </div>
        <div class="contact">
            <a href="tel:123456">
                <i class="iconfont icon-shouji"></i>
                <p>联系</p>
            </a>
        </div>
        <div class="talk">
            <i class="iconfont icon-message"></i>
            <span>聊天</span>
        </div>
        <div class="reserve">
            <i class="iconfont icon-yuyue"></i>
            <span>预约</span>
        </div>
    </div>
</footer>
</body>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        pagination: '.swiper-pagination'
    })
</script>
<script>
    $('.t-title div').click(function(){
        var _index = $(this).index();
        var _left = _index*50+'%';
        $('.b-border').animate({marginLeft:_left});
//        $('.s-con').eq(_index).fadeIn().siblings().hide();
    })
</script>
</html>